<template>
  <div class="img-detail">
    <myheader titleName="图片详情"></myheader>
    <div>
      <h3 class="img-title">{{imgInfo.title}}</h3>
      <p class="img-info">
        <span class="time">{{imgInfo.add_time | ctime}}</span>
        <span>{{imgInfo.click}}次浏览</span>
        <span>分类：xxx</span>
      </p>
    </div>
    <ul id="imgul">
      <!-- <li>
        <img class="previewer-demo-img" v-for="(item, index) in list" :key="index" :src="item.src" width="100" @click="show(index)">
        <previewer :list="list" ref="previewer" :options="options" @on-index-change="logIndexChange"></previewer>
      <li> -->
      <li class="previewer-demo-img" v-for="(item, index) in list" :key="index">
        <img class="previewer-demo-img" :src="item.src" width="100" @click="show(index)">
      </li>
      <previewer :list="list" ref="previewer" :options="options" @on-index-change="logIndexChange"></previewer>
    </ul>
    <div class="content" v-html="imgInfo.content"></div>
    <mycomment :id="id"></mycomment>
  </div>
</template>
<script>
import { getImginfo, getThumimages } from '@/api'
import { Previewer } from 'vux'
import myheader from '@/components/myheader'
import mycomment from '@/components/comment'
export default {
  components: {
    Previewer, myheader, mycomment
  },
  data () {
    return {
      id: this.$route.params.id,
      imgInfo: {},
      list: [],
      options: {
        getThumbBoundsFn (index) {
          // find thumbnail element
          let thumbnail = document.querySelectorAll('.previewer-demo-img')[index]
          // get window scroll Y
          let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
          // optionally get horizontal scroll
          // get position of element relative to viewport
          let rect = thumbnail.getBoundingClientRect()
          // w = width
          return { x: rect.left, y: rect.top + pageYScroll, w: rect.width }
          // Good guide on how to get element coordinates:
          // http://javascript.info/tutorial/coordinates
        }
      }
    }
  },
  created () {
    this.init()
    this.initImg()
  },
  methods: {
    // 初始化缩略图信息
    init () {
      getImginfo(this.id)
        .then(res => {
          console.log(res)
          this.imgInfo = res.message[0]
        })
    },
    // 初始化缩略图图片
    initImg () {
      getThumimages(this.id)
        .then(res => {
          // console.log(res)
          res.message.map(item => {
            let imglist = {
              src: item.src,
              msrc: item.src,
              w: 600,
              h: 400
            }
            this.list.push(imglist)
          })
        })
    },
    logIndexChange (arg) {
      console.log(arg)
    },
    show (index) {
      this.$refs.previewer.show(index)
    }
  }
}
</script>

<style lang="scss">
  img {
    width: 100%;
    height: 100%;
  }
  #imgul{
    display: flex;
    flex-wrap: wrap;
    li {
    width: 33.33%;
  }
  // li{
  //   display: flex;
  //   flex-wrap: wrap;
  //   img{
  //   width: 33.33%;
  // }
  }
</style>

<style lang="scss" scoped>
.img-detail {
  margin-top: 40px;
  margin-bottom: 55px;

  .img-title {
    font-size: 16px;
    font-weight: bold;
  }
  .img-info {
    display: flex;
    justify-content: space-around;
    color: #26a2ff;
    font-size: 14px;
  }
  .content {
    font-size: 14px;
  }
}
</style>
